// animation
@mixin animation($val){
	-webkit-animation:$val;
	-moz-animation:$val;
	-o-animation:$val;
	animation:$val;
}
//transition
@mixin transition($val){
	-webkit-transition:$val;
	-moz-transition:$val;
	-o-transition:$val;
	transition:$val;
}
@mixin transform-origin($val){
  -webkit-transform-origin:$val;
  -moz-transform-origin:$val;
  -o-transform-origin:$val;
  transform-origin:$val;
}


/*
rem
 */

//background-position
@mixin background-position($valX,$valY){
	background-position: (-($valX/40)+rem) (-($valY/40)+rem);
}
@mixin background-size($val){
	background-size: ($val/40)+rem;
}
//width
@mixin width($val){
	width:($val/40)+rem;
}
//height
@mixin height($val){
	height:($val/40)+rem;
}
@mixin maxH($val){
	max-height: ($val/40)+rem;
}
//line-height
@mixin line_h($val){
	line-height:($val/40)+rem;
}
//left
@mixin left($val){
	left:($val/40)+rem;
}
//left
@mixin right($val){
	right:($val/40)+rem;
}
//top
@mixin top($val){
	top:($val/40)+rem;
}
//bottom
@mixin bottom($val){
	bottom:($val/40)+rem;
}

@mixin m_top($val){
  margin-top:($val/40)+rem;
}
@mixin m_bot($val){
  margin-bottom:($val/40)+rem;
}
@mixin m_right($val){
  margin-right:($val/40)+rem;
}
@mixin m_left($val){
  margin-left:($val/40)+rem;
}


//
@mixin padding($val){
	padding:($val/40)+rem;
}
@mixin p_left($val){
	padding-left:($val/40)+rem;
}
@mixin p_right($val){
	padding-right:($val/40)+rem;
}
@mixin p_top($val){
	padding-top:($val/40)+rem;
}
@mixin p_bottom($val){
	padding-bottom:($val/40)+rem;
}
